A dynamically updating filled range chart with a threshold

This chart is very similar to the regular scrolling line chart but is a filled range chart with a threshold set.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="1000" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var obj       = null;
        var numvalues = 600;
        var value     = 25;

        // RGraph.array_pad(array, length[, value])
        var data1 = RGraph.arrayPad([], numvalues, null);
        var data2 = RGraph.arrayPad([], numvalues, null);
    
        function drawGraph ()
        {
            // "cache" this in a local variable
            var RG = RGraph;
            var ma = Math;
            var canvas = document.getElementById("cvs");
            RG.clear(canvas);
            

            if (!obj) {
                obj = new RGraph.Line({
                    id: 'cvs',
                    data: [data1, data2],
                    options: {
                        xticks: 100,
                        backgroundGridAutofitNumvlines: 15,
                        title: 'Bandwidth used (Mb/s)',
                        titleXaxis: 'Bandwidth used',
                        titleXaxisPos: 0.5,
                        colors: ['black'],
                        linewidth: 0.5,
                        yaxispos: 'right',
                        ymax: 50,
                        noxaxis: true,
                        numyticks: 0,
                        filled: true,
                        filledRange: true,
                        filledRangeThreshold: 25,
                        filledRangeThresholdColors: ['red','#0c0'],
                        fillstyle: 'red',
                        colors: ['rgba(0,0,0,0)'],
                        tickmarks: null,
                        textAccessible: true,
                        scaleZerostart: true
                    }
                }).draw();
            }

            
            value = value + RG.random(-3,3);
            value = ma.max(0,value)
            value = ma.min(50,value)
            
            obj.original_data[0].push(Math.min(value + 5, 50));
            obj.original_data[1].push(Math.max(value - 5, 0));
            
            obj.original_data[0] = RG.arrayShift(obj.original_data[0]);
            obj.original_data[1] = RG.arrayShift(obj.original_data[1]);
            
            obj.draw();

            

            RGraph.Effects.updateCanvas(drawGraph);
        }



        drawGraph();
    };
</script>